<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='code'>
    </div>

    <script src="template.js"></script>
    <script src="MyReact.js"></script>
    <script>

        class Item extends MyReact.BaseComponent {
            constructor(props) {
                super(props);
                this.state = { value: this.props.value,time:new Date().toLocaleTimeString() }
                this.stateChange = this.stateChange.bind(this);
                this.timeUpdate = this.timeUpdate.bind(this);
            }

            componentDidMount() {
                setInterval(this.timeUpdate, 1000);
            }

            componentWillUnmount()
            {
                clearInterval(this.timer);
            }

            timeUpdate(){
                this.setState({ time: new Date().toLocaleTimeString() })
            }


            stateChange(e) {
                this.setState({ value: e.target.value })
            }

            render() {
                return "<div><0>{this.state.time}</p><input value={this.state.value} on-keyup={this.stateChange} /><p>this.state.value:{this.state.value}</p>this.props.value:<input value={this.props.value} /><br/><br/></div>";
            }

        }

        class ItemList extends MyReact.BaseComponent {
            constructor(props) {
                super(props);
                this.state = { value: this.props.value }
            }

            


            render() {
                return this.createItem(this.props.list, (index, item) => {
                    return this.createItemComponent("<div style='background:#cccccc;margin:5px;'><p>这是 ItemList 的一个 item ,{parseInt(this.Index)%2==0?'奇数组件 Item 显示':'偶数组件 Item 隐藏'}</p><component com-if={parseInt(this.Index)%2==0} com-name=Item value={this.Index+':'+this.Item.value}></component></div>", index, item);
                })
            }

        }

        class MyForm extends MyReact.BaseComponent {
            constructor(props) {
                super(props);
                this.state = { value: "",time:new Date().toLocaleTimeString(), listvalue: "", list: [{ value: 111 }, { value: 2222 }, { value: 33333 }] }

                this.stateChange = this.stateChange.bind(this);
                this.listChangeAdd = this.listChangeAdd.bind(this);
                this.listChangeRemove = this.listChangeRemove.bind(this);
                this.listUpdate = this.listUpdate.bind(this);
                this.timeUpdate = this.timeUpdate.bind(this);
            }
            

            componentDidMount() {
                this.setState({ listvalue: JSON.stringify(this.state.list) })
                //setInterval(this.timeUpdate, 1000);
            }
            timeUpdate(){
                this.setState({ time: new Date().toLocaleTimeString() })
            }

            stateChange(e) {
                this.setState(function (preState) {
                    for (var key in preState.list) {
                        preState.list[key].value = e.target.value
                    }
                    return { value: e.target.value, list: preState.list, listvalue: JSON.stringify(preState.list) }
                })
            }

            listChangeAdd(e) {

                this.setState(preState => {
                    var newlist = [{ value: preState.value }].concat(preState.list);
                    return { list: newlist, listvalue: JSON.stringify(newlist) }
                })
            }
            listChangeRemove(e) {

                this.setState(preState => {
                    preState.list.pop();
                    return { list: preState.list, listvalue: JSON.stringify(preState.list) }
                })
            }

            listUpdate(e) {

                this.setState(preState => {
                    for (var key in preState.list) {
                        preState.list[key].value = new Date().getTime();
                    }
                    return { list: preState.list, listvalue: JSON.stringify(preState.list) }
                })
            }

            render() {
                return "<div><p>time:{this.state.time}</p><input value={this.state.value} on-keyup={this.stateChange} /><input type='button' value='提交' on-click={this.listChangeAdd} /><input type='button' value='移除' on-click={this.listChangeRemove} /><input type='button' value='更新list' on-click={this.listUpdate} /><p>this.state.value:{this.state.value}</p><p>this.state.list:{this.state.listvalue}</p><p><component com-name=ItemList list={this.state.list} ></component></p><div>";
            }

        }
        var com = MyReact.DOMRender("<component com-name=MyForm ></component>", document.getElementById("code"))
        console.log(com);

    </script>
</body>

</html>